// Overwrite Bootstrap variables
$container-lg: 1000px;


// Bootstrap 
$icon-font-path: "../bower_components/bootstrap-sass/vendor/assets/fonts/bootstrap/";
@import '../bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap.scss';

// HD Finance colors
$hdf-bg			: #f3f3f3;
$hdf-red		: #e51937;
$hdf-red-dark	: #c3152f;
$hdf-white		: #ffffff;
$hdf-orange		: #f77f20;
$hdf-gray 		: #4c4d4f;
$hdf-gray-sp	: #6f7072;
$hdf-gray-dark	: #333132;
$hdf-gray-light : #d1d3d4;
$hdf-gray-lighter: #7c7c7c;
$hdf-gray-cl	: #e3e3e3;
$hdf-gray-bd	: #e4e1e1;
$hdf-pink		: #fbdde1;
$hdf-pink-dark	: #f397a5;
$hdf-gray-paging: #eeeeee;
$hdf-gray-paging-hv:#aaaaaa;
$hdf-blue-text	: #3b5998;

// HD Finance text colors
$hdf-white-text : #ffffff;
$hdf-gray-text	: #333333;

// HD Finance font size
$hdf-fs11: 0.7857142857142857em;
$hdf-fs12: 0.8571428571428571em;
$hdf-fs13: 0.9285714285714286em;
$hdf-fs15: 1.071428571428571em;
$hdf-fs18: 1.285714285714286em;
$hdf-fs20: 1.428571428571429em;
$hdf-fs22: 1.571428571428571em;
$hdf-fs25: 1.785714285714286em;
$hdf-fs30: 2.142857142857143em;
$hdf-fs35: 2.5em;
$hdf-fs40: 2.857142857142857em;

// HD Finance sprites & images
$hdf-spriteicon: '../images/hdf-icons.png';
$hdf-bulleticon: '../images/bullet.png';
$hdf-airmailbg: '../images/airmail-bg.png';

// HD Finance Site
.rts-gutter {
	padding-left: 0;
	padding-right: 0;
}

.rtl-gutter {
	padding-left: 0;	
}

.rtr-gutter {
	padding-right: 0;
}

.rts-b-gutter {
	padding-bottom: 0!important;
}

.rts-t-margin {
	margin-top: 0;
}

.rts-b-margin {
	margin-bottom: 0!important;
}

.rts-l-margin {
	margin-left: 0!important;
}

.rts-r-margin {
	margin-right: 0!important;
}

.rts-margin {
	margin: 0!important;
}


.hdf-l-gutter {
	padding-left: 10px;
}

.hdf-r-gutter {
	padding-right: 10px;
}

.hdf-gutter {
	padding-right: 10px;
	padding-left: 10px;
}

.hdf-pb-gutter {
	padding-left: 5px;
	padding-right: 5px;
}

.hdf-s-gutter {
	padding-right: 8px;
	padding-left: 0;
}

.hdf-j-gutter {
	padding-left: 8px;
	padding-right: 0;
}

.hdf-r-margin {
	margin-right: 10px;
}

@media (max-width: 992px) {
	.hdf-s-gutter {
		padding-right: 0;
		padding-left: 0;
	}

	.hdf-j-gutter {
		padding-left: 0;
		padding-right: 0;
	}
}

.panel-orange {
	@include box-shadow(0px 1px 5px 0px $gray-light);

	.panel-heading {
		color: $hdf-white-text;
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		font-size: $hdf-fs18;
		text-align: center;
		padding: 13px 0;
		margin: -2px -2px 0 -2px;
		max-height: 52px;
		overflow: hidden;
		white-space:nowrap;
    	text-overflow:ellipsis;
		background-color: $hdf-orange;
		border-bottom: 1px solid $panel-default-border;
	}
	.panel-body {
		padding: 0 0 30px 0;
		margin: 0 -2px;
		.carousel-indicators {
			bottom: -36px;
			li {
				border-color: $hdf-orange;
			}
			.active {
				background-color: $hdf-orange;
			}
		}

		.carousel-inner {
			.item img {
				margin-left: 0;
			}
		}
	}
}

.hdf-container {
	background-color: $hdf-bg;
	a:focus, a:active {
		outline: none;
	}

	> header > .container > .row {
		position: relative;
	}
}

.hdf-wrap {
	max-width: 1000px;
	margin: 0 auto;
}

header {
	background-color: $hdf-white;
	.hdf-logo {
		margin: 0;
		padding-left: 0;
		padding-right: 0;
		position: absolute;
		top: 10px;
		left: 0;
		line-height: normal;
	}
}

@media (max-width: 768px) {
	header {
		.hdf-logo {
			left: 10px;
		}
	}
}

.hdf-hotline {

	color: $hdf-white-text;
	height: 30px;
	float: right;
	
	span {
		float: left;
		display: block;
		border-radius: 0;
		&.label {
			height: 100%;
			font-size: $hdf-fs12;
			font-weight: bold;
			text-transform: capitalize;
			background: $hdf-gray;
			padding: 9px 10px;
		}

		&.number {
			height: 100%;
			font-size: $hdf-fs20;
			font-weight: bold;
			text-transform: uppercase;
			background: $hdf-red;
			padding: 2px 10px;
		}
	}

	
}

.hdf-form-search  {
	float: right;
	width: auto;
	.input-group {
		width: 100%;
		border: 1px solid $input-border;
	}
	
	.input-group-sm > .form-control {
		height: 28px;
		padding-right: 25px;
	}

	.input-group .form-control:first-child {
		border-radius: 0;
		border: none;
		&:focus {
			outline: none;
		}
	}
	
	.hdf-glassicon {
		position: absolute;
		top: 5px;
		right: 8px;
		color: $btn-default-color;
	}
}

.hdf-navmain {
	margin: 13px 0;
	.nav > li > a {
		color: $hdf-gray-text;
		font-size: $hdf-fs12;
		padding: 0;
		margin-left: 15px;
		
		&:hover {
			background-color: transparent;
		}
	}
}

.hdficon {
	display: inline-block;
	vertical-align: text-bottom;
	background: url($hdf-spriteicon) no-repeat;
}

.hdficon-chart {
	width: 18px;
	height: 14px;
	background-position: -2px -3px;
}

.hdficon-monitor {
	width: 18px;
	height: 15px;
	background-position: -23px -2px;
}

.hdficon-tips {
	width: 18px;
	height: 15px;
	background-position: -43px -2px;
}

.hdficon-box {
	width: 18px;
	height: 14px;
	background-position: -62px -3px;	
}

.hdficon-pencial {
	width: 18px;
	height: 14px;
	background-position: -82px -3px;
}
.hdficon-ticky {
	width: 16px;
	height: 16px;
	background-position: -101px -4px;	
}

.hdficon-redarrow {
	width: 11px;
	height: 20px;
	vertical-align: bottom;
	margin-right: 5px;
	background-position: -4px -29px;		
}

.hdficon-tw {
	width: 32px;
	height: 32px;
	background-position: -19px -23px;
}

.hdficon-fb {
	width: 32px;
	height: 32px;
	background-position: -61px -23px;
}

.hdficon-goo {
	width: 32px;
	height: 32px;
	background-position: -103px -23px;
}

.hdficon-pin {
	width: 32px;
	height: 32px;
	background-position: -145px -23px;
}

.hdficon-lt {
	width: 38px;
	height: 32px;
	background-position: -2px -67px;
}

.hdficon-kt {
	width: 40px;
	height: 32px;
	background-position: -53px -69px;
}

.hdficon-pr {
	width: 36px;
	height: 37px;
	background-position: -100px -65px;
}

.hdficon-bt {
	width: 26px;
	height: 39px;
	background-position: -152px -65px;
}

.hdficon-advs {
	width: 148px;
	height: 142px;
	background-position: -200px -0px;	
}

.hdficon-acred {
	width: 21px;
	height: 21px;
	background-position: -359px -1px;		
}

.hdficon-area {
	width: 11px;
	height: 16px;
	background-position: -363px -28px;			
}

.hdficon-acrblue {
	width: 12px;
	height: 13px;
	background-position: -362px -51px;		
}

.hdf-quickmenu {
	background-color: $hdf-red;
	width: 100%;
	@include transition(all .1s linear);
	.navbar {
		min-height: inherit;
		margin-bottom: 0;
	}
	.nav > li {
		&:last-child > a {
			padding-right: 0;
		}
	}
	.nav > li > a {
		color: $hdf-white-text;
		font-size: $hdf-fs15;
		padding: 10px 32px 10px 0;
		&:hover {
			background-color: transparent;
		}
	}
	.navbar-inverse {
		border: none;
		border-color: transparent;
		background-color: transparent;
	}
}


@media (max-width: 1200px) {
	.hdf-quickmenu {
		.nav > li > a {
			padding: 10px 24px 10px 0;
		}
	}
}

@media (max-width: 768px) {
	.hdf-quickmenu {
		.navbar-nav {
			margin-right: 15px;
			margin-left: 15px;
		}
		.nav > li > a {
			padding: 10px 0;
		}
	}
}


.hdf-banner {
	position: relative;
	margin-bottom: 20px;
	margin-right: -15px;
	margin-left: -15px;

	@include box-shadow(0px 1px 5px 0px $gray-light);

	.carousel {
		
		//@include box-shadow(0px 1px 5px 0px $gray-light);
	}

	.hdf-sloganadvs {
		position: absolute;
		top: 145px;
		left: 0px;
		width: 300px;
		h2 {
			color: #ffffff;
			font-weight: bold;
			margin-top: 5px;
			margin-bottom: 5px;
			font-family: 'Arial', sans-serif;
			display: inline;
			padding: 5px 0;
			line-height: 50px;
			background: rgba(76, 77, 79, 0.7);
			span {
				position: relative;
				left: 0;
			}
		}
	}

	.hdf-noticebox {
		position: absolute;
		top: 0;
		right: 20px;
		width: 380px;
		padding: 5px 15px 10px 15px;
		font-family: 'Arial', sans-serif;
		background-color: rgba(255, 255, 255, 0.7);
		border-bottom-right-radius: 4px;
		border-bottom-left-radius: 4px;
		.hdf-title {
			color: $hdf-red;
			font-family: 'Roboto', sans-serif;
			font-size: $hdf-fs22;
			font-weight: bold;
			text-transform: uppercase;
		}
		ul {
			padding-left: 24px;
			list-style-image: url($hdf-bulleticon);
			li {
				font-size: $hdf-fs13;
				line-height: 21px;
			}
		}

		.btn {
			font-family: 'Arial', sans-serif;
			background-color: $hdf-red;
			color: $hdf-white-text;
			font-size: $hdf-fs15;
			font-weight: bold;
			border: 3px solid $hdf-red-dark;
			border-top: none;
			border-right: none;
			padding: 9px 26px;
		}
	}
}

@media (max-width: 992px) {
	.hdf-banner {
		.hdf-sloganadvs {
			top: 84px;
		}	
		.hdf-noticebox {
			width: 100%;
			position: relative;
			top: 5px;
			right: 0;
		}
	}
}

.row-offcanvas {

	.hdf-maincontent {
		> .row {
			margin-right: -80px;
		}
	}

	.panel-orange .panel-heading {
		letter-spacing: -1px;
	}

}

/*//Form Rate*/
.sidebar-offcanvas {

	@include box-shadow(0px 1px 5px 0px $gray-light);

	@include transition(all .1s linear);

	border-radius: $border-radius-base;

	padding: 15px 8px 0 8px;

	margin-left: 50px;

	margin-right: -15px;

	background-color: $hdf-white;

	p {
		font-family: 'Arial', sans-serif;
		font-size: $hdf-fs15;
		
		strong {
			letter-spacing: -1px;
		}
	}

	.hdf-title {
		position: relative;
		display: inline-block;
		padding: 7px 18px 7px 11px;
		color: $hdf-white-text;
		font-family: 'Roboto', sans-serif;
		font-size: $hdf-fs15;
		font-weight: 700;
		text-transform: uppercase;
		background-color: $hdf-red;
		margin-left: -12px;
		margin-bottom: 10px;
		border-bottom-left-radius: $border-radius-base;

		&:before {
			content: "";
			position: absolute;
			width: 0;
			height: 0;
			border-top: 4px solid transparent;
			border-right: 3px solid #e51937;
			border-bottom: 0px solid transparent;
			top: -4px;
			left: 0px;
		}

		&:after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			width: 0;
			height: 0;
			border-right: 6px solid $hdf-white;
			border-top: 18px solid transparent;
			border-bottom: 17px solid transparent;
			margin: auto;
		}
	}

	.hdf-linkext {
		margin: 15px 0;
		padding: 0;
		li {
			list-style-type: none;
			padding-bottom: 6px;
			a {
				font-family: 'Arial', sans-serif;
				font-size: $hdf-fs11;
				text-transform: uppercase;
				color: $hdf-blue-text;
			}
		}
	}
}

.hdf-frate {
	@include box-shadow(0px 1px 5px 0px $gray-light);

	@include transition(all .2s ease-out);

	border-radius: $border-radius-base;

	padding: 15px 8px 0 8px;

	background-color: $hdf-white;

	position: absolute;

	z-index: 100;

	width: 250px;

	height: auto;

	max-height: 10px;

	visibility: hidden;

	overflow: hidden;
	
	.hdf-guidetext, label {
		font-size: $hdf-fs15;
		font-weight: normal;
	}
	.form-group input {
		font-size: $hdf-fs12;
	}
	button {
		text-transform: uppercase;
		display: inline-block;
		&.btn-result {
			color: $hdf-white-text;
			font-family: 'Roboto', sans-serif;
			font-size: $hdf-fs15;
			font-weight: 400;
			background-color: $hdf-red;
			margin-right: 2px;
			margin-bottom: 11px;
		}

		&.btn-addit {
			font-size: $hdf-fs11;
			padding: 9px 7px;
			margin-bottom: 11px;
		}
	}
}

.hdf-frate-expand {
	visibility: visible;
	max-height: 490px;
}

/*//Notice Board*/
.hdf-noticeboard {

	@include box-shadow(0px 1px 5px 0px $gray-light);

	border-radius: $border-radius-base;
	
	padding: 20px 15px 15px 15px;

	//background-color: $hdf-white;

	background: $hdf-white url($hdf-airmailbg) repeat-x -11px 0;

	.hdf-title {
		font-family: 'Roboto', sans-serif;
		font-size: $hdf-fs25;
		font-weight: 700;
		color: $hdf-red;
		font-weight: bold;
		text-transform: uppercase;
	}

	.hdf-article {
		color: $hdf-gray;
		font-size: $hdf-fs20;
		font-weight: bold;
	}

	.hdf-words {
		font-size: $hdf-fs15;
	}
}

/*//Video Box*/
.hdf-videobox {
	@include box-shadow(0px 1px 5px 0px $gray-light);
	position: relative;
	overflow: hidden;
	min-height: 205px;
	height: auto;
	padding: 0;
	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/*//News*/
.link-more {
	display: inline-block;
	margin-top: 8px;
}

.hdf-news {
	margin-top: 20px;
	margin-bottom: 20px;
	@include box-shadow(0px 1px 5px 0px $gray-light);
	border-radius: $border-radius-base;
	padding: 15px 15px 15px 18px;
	background-color: $hdf-white;

	.clearfix {
		border-bottom: 1px solid $panel-default-border;
		padding-bottom: 5px;
		margin-bottom: 10px;
	}

	.hdf-title {
		font-family: 'Roboto', sans-serif;
		font-size: $hdf-fs25;
		font-weight: 300;
	}

	ul {
		margin: 0;
		padding: 0;
		li {
			list-style: none;
			border-bottom: 1px dashed $panel-default-border;
			padding: 5px 0;
			overflow: hidden;
			height: auto;
			&:last-child {
				border-bottom: none;
			}
		}
	}
}

/*//Tabs*/
.hdf-tab {
	margin-right: 4px;
	li {
		font-family: 'Roboto', sans-serif;
		font-size: $hdf-fs25;
		font-weight: 300;
		a {
			padding: 0px 15px;
			color: $hdf-white-text;
			background-color: $hdf-red;
			&:hover {
				color: $gray;
				background-color: transparent;
			}
		}
		&.active > a {
			//@include box-shadow(0px 1px 5px 0px $gray-light);	
		}
	}
}
.tab-content {
	border: 1px solid $panel-default-border;
	margin-top: -1px;
	margin-bottom: 20px;
	padding: 20px 15px 15px 15px;
	@include box-shadow(2px 2px 5px -2px $gray-light);
	border-radius: $border-radius-base;
	border-top-left-radius: 0;
	background-color: $hdf-white;
	.tab-pane {
		text-align: justify;
	}
}

/*//Partners*/
.hdf-partners {
	@include box-shadow(0px 1px 5px 0px $gray-light);
	border-radius: $border-radius-base;
	padding: 15px;
	background-color: $hdf-white;
	.hdf-title {
		font-family: 'Roboto', sans-serif;
		font-size: $hdf-fs25;
		font-weight: 300;
		margin-bottom: 20px;
		img {
			vertical-align: baseline;
		}
	}
	.nav-justified {
		a:hover {
			background-color: transparent;
		}
	}
}

/*//Footer*/
footer {
	position: relative;
	margin-top: 64px;
	background-color: $hdf-gray;
	border-top: 13px solid $hdf-gray-dark;
	padding: 40px 0 80px 0;

	.hdf-movetop {
		position: absolute;
		width: 52px;
		height: 26px;
		background-color: $hdf-gray-dark;
		color: #fff;
		text-align: center;
		border-radius: 26px 26px 0 0;
		left: 50%;
		margin-left: -26px;
		top: -36px;
		outline: none;
		&:before {
			content: "";
			display: inline-block;
			width: 17px;
			height: 10px;
			margin-top: 13px;
			background: url($hdf-spriteicon) no-repeat -122px -6px;
			@include transition(all .1s linear);
		}

		&:hover {
			&:before {
				margin-top: 9px;
			}
		}
	}

	.hdf-fmenu {
		.nav {
			text-align: center;
			li {
				float: none;
				display: inline-block;
				span {
					color: $hdf-gray-sp;
				}
			}
			li > a {
				display: inline;
				color: $hdf-white-text;
				text-transform: uppercase;
				padding: 10px 5px;
				&:hover {
					text-decoration: underline;
					background-color: transparent;
				}
			}
		}
	}
	
	.hdf-socials {
		margin: 20px 0;
		background: url(../images/ver-line.png) repeat-x 0 50%;
		.nav {
			text-align: center;
			width: 180px;
			background-color: $hdf-gray;
			span {
				float: none;
				display: inline-block;
				padding: 0 3px;
			}
			span > a {
				padding: 0;
				&:hover {
					background-color: transparent;
				}
			}
		}
	}

	.hdf-cp {
		text-align: center;
		color: rgba(255,255,255,0.3);
		font-size: $hdf-fs12;
	}
}


/*//Introduction Page*/
.hdf-banner {
	.hdf-textintro {
		position: absolute;
		bottom: 10.8%;
		left: 1.8%;
		color: $hdf-white-text;
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		font-size: $hdf-fs30;
		text-transform: uppercase;
	}
	.carousel-control {
		position: absolute;
		top: 50%;
		margin-top: -20px;
		width: 20px;
		height: 20px;
		z-index: 10;
		&.left {
			left: 20px;
		}
		&.right {
			right: 20px;
		}
		&.left, &.right {
			background-image: none;
		}
		.glyphicon-chevron-left,
		.glyphicon-chevron-right {
			display: block;
			position: relative;
			top: 0;
			color: $hdf-red;
		}
		.glyphicon-chevron-left {
			left: 0;
		}
		.glyphicon-chevron-right {
			right: 0;
		}
	}
}

.hdf-bc {
	> li  {
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		font-size: $hdf-fs15;
		> a {
			color: $hdf-gray;
		}
		&.active {
			color: $hdf-red;
		}
	}

	> li + li:before {
		content: "\00bb";
		padding: 0 5px;
		color: $gray-dark;
	}	
}

.hdf-boxintros {
		
	@include box-shadow(0px 1px 5px 0px $gray-light);

	@include transition(all .1s linear);

	border-radius: $border-radius-base;
	
	background-color: $hdf-white;
	
	margin-bottom: 40px;

	padding: 20px;

	.nav-pills {
		border-bottom: 1px solid $panel-default-border;
		margin-bottom: 20px;
		li {
			padding: 10px 0;
			&.active > a {
				border-bottom: 3px solid $hdf-red;
			}
		}

		li > a {
			font-family: 'Roboto', sans-serif;
			font-weight: 300;
			font-size: $hdf-fs18;
			display: inline;
			padding: 10px 0;
			margin-right: 15px;
			color: $gray-dark;
			border-radius: 0;
			background-color: transparent;

			&:hover {
				color: $gray-dark;
				background-color: transparent;
			}
		}
	}

	.hdf-wordintro {
		text-align: justify;
		img {
			margin: 20px auto;
		}
	}
}

.hdf-presidents {
	.hdf-title {
		font-family: 'Roboto', sans-serif;
		font-weight: 700;
		font-size: $hdf-fs40;
		text-align: center;
		text-transform: uppercase;
		margin-bottom: 40px;
	}
	.hdf-pd {
		text-align: center;
		.hdf-picpd {
			position: relative;
			width: 171px;
			height: 171px;
			margin: 0 auto 10px auto;
			overflow: hidden;
			border-radius: 150px;
			-webkit-border-radius: 150px;
			-moz-border-radius: 150px;

			@include box-shadow(0px 1px 5px 0px $gray-light);
			
			img {
				position: absolute;
				top: 0;
				&.thumb1 {
					left: -15px;
				}

				&.thumb2 {
					left: -43px;
				}

				&.thumb3 {
					left: -22px;
				}
			}
		}
		.hdf-name {
			font-family: 'Roboto', sans-serif;
			font-weight: 300;
			font-size: $hdf-fs20;
			margin-bottom: 10px;
			span {
				display: block;
			}
		}
		.hdf-intro {
			font-family: 'Arial', sans-serif;
			font-size: $hdf-fs15;
			padding: 0 20px;
			margin-bottom: 15px;
		}
		
	}
}

/*//Products Page*/
.hdf-text-sp {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	font-family: 'Arial', sans-serif;
	font-size: $hdf-fs35;
	font-weight: bold;
	color: $hdf-white-text;
	letter-spacing: -1px;
}

.hdf-stepsrg {
	position: absolute;
	top: 85px;
	width: 100%;
	.hdf-st {
		text-align: center;
		.hdf-icnst {
			position: relative;
			width: 70px;
			height: 70px;
			margin: 0 auto 3px auto;
			overflow: hidden;
			border-radius: 51px;
			-webkit-border-radius: 51px;
			-moz-border-radius: 51px;
			border: 2px solid $hdf-white;
			
			i {
				display: table-cell;
				width: 70px;
				height: 70px;
				vertical-align: middle;
				text-align: center;
			}
			
		}
		.hdf-name {
			font-family: 'Roboto', sans-serif;
			font-weight: 700;
			font-size: $hdf-fs20;
			color: $hdf-white-text;
			margin-bottom: 2px;
			span {
				display: block;
			}
		}
		.hdf-intro {
			font-family: 'Arial', sans-serif;
			font-size: $hdf-fs15;
			color: $hdf-white-text;
			padding: 0 20px;
			margin-bottom: 15px;
		}
		
	}
}

.panel-red {
	@include box-shadow(0px 1px 5px 0px $gray-light);
	border-bottom: none;
	.panel-heading {
		color: white;
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		font-size: $hdf-fs25;
		text-align: left;
		padding: 8px 0 8px 10px;
		margin: -2px -2px 0 -2px;
		max-height: 52px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		background-color: $hdf-red;
	}
	.panel-body {
		padding: 0;
		margin: 0 -2px;
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			li {
				border-bottom: 1px solid $hdf-gray-light;
				a {	
					position: relative;
					font-family: 'Roboto', sans-serif;
					font-weight: 300;
					font-size: $hdf-fs18;	
					color: $gray-dark;
					display: block;
					padding: 14px 10px 11px 24px;
					border-left: 3px solid $hdf-red;
					&:hover {
						text-decoration: none;
						color: $hdf-white-text;
						background-color: $hdf-gray;

						&:before {
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							width: 0;
							height: 0;
							border-left: 13px solid $hdf-gray-lighter;
							border-top: 25px solid transparent;
							border-bottom: 25px solid transparent;
							margin: auto;
						}
					}
				}
				
				&:last-child {
					a {
						border-bottom-left-radius: 3px;
						border-bottom-right-radius: 3px;
					}
				}

				&.active {
					a {
						text-decoration: none;
						color: $hdf-white-text;
						background-color: $hdf-gray;

						&:before {
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							width: 0;
							height: 0;
							border-left: 13px solid $hdf-gray-lighter;
							border-top: 25px solid transparent;
							border-bottom: 25px solid transparent;
							margin: auto;
						}
					}
				}

				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
}

.hfd-findsv {
	position: relative;
	z-index: 1;
	border-radius: $border-radius-base;
	background-color: $hdf-white;
	@include box-shadow(0px 1px 5px 0px $gray-light);
	padding: 26px 0 29px 0;
	text-align: center;
	margin-bottom: 20px;
	.hdf-sv {
		width: 100%;
		background-color: $hdf-white;
	}
	a.hdf-ls {
		position: relative;
		display: inline-block;
		font-family: 'Roboto', sans-serif;
		font-size: $hdf-fs18;
		color: $hdf-white-text;
		background-color: $hdf-red;
		border-top-right-radius: 0px;
		margin-top: -2px;
		margin-left: -20px;
		
		&:before {
			content: "";
			position: absolute;
			z-index: -2;
			bottom: 15px;
			left: 10px;
			width: 80%;
			height: 100%;
			max-width: 300px;
			max-height: 100px;
			border-radius: 10px;
			background: rgba(0, 0, 0, 0.4); 
			@include box-shadow(0 28px 10px rgba(0, 0, 0, 0.4));
			@include rotate(-10deg);
		}

		&:after {
			content: "";
			position: absolute;
			top: -1px;
			right: -26px;
			width: 0;
			height: 0;
			border-left: 26px solid $hdf-red;
			border-top: 0px solid transparent;
			border-bottom: 24px solid transparent;
			margin: auto;
		}
	}
}

.hdf-proitem {
	border-radius: $border-radius-base;
	background-color: $hdf-white;
	@include box-shadow(0px 1px 5px 0px $gray-light);
	padding: 21px 10px;
	margin-bottom: 20px;

	.hdf-ptpd {
		position: relative;
		width: 266px;
		height: 266px;
		margin: 0 auto 3px auto;
		overflow: hidden;
		border-radius: 241px;
		-webkit-border-radius: 241px;
		-moz-border-radius: 241px;
		border: 4px solid $hdf-gray-cl;
		text-align: center;
		margin-top: 10px;
	}

	.hdf-infopd {
		.hdf-title {
			font-family: 'Roboto', sans-serif;
			font-size: $hdf-fs25;
			font-weight: 300;
			color: $hdf-gray;
			margin-bottom:10px;
		}

		.hdf-words {
			font-family: 'Arial', sans-serif;
			font-size: $hdf-fs15;
			margin-bottom: 10px;
		}
		ul {
			margin: 0 0 10px 0;
			padding: 0;
			list-style: none;
			li {
				line-height: 28px;
				a {
					position: relative;
					color: $hdf-gray;
					font-family: 'Arial', sans-serif;
					font-size: $hdf-fs15;
					padding-left: 22px;

					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						margin-top: -4px;
						background: $hdf-gray;
						height: 8px;
						width: 8px;
						border-radius: $border-radius-base;
						
						@include transition(all .4s ease-out);
					}
				}
			}
		}
		.hdf-or {
			margin: 0 5px;
		}

	}
	
	.hdf-pdbrand {
		margin-bottom: 10px;
		.hdf-title {
			color: $hdf-gray;
			font-family: 'Roboto', sans-serif;
			font-size: $hdf-fs25;
			font-weight: 300;
			padding-left: 5px;
		}
		a.hdf-more {
			color: $hdf-gray;
			font-family: 'Roboto', sans-serif;
			font-size: $hdf-fs15;
			font-weight: 300;
			padding-right: 5px;
			margin-top: 9px;
		}
	}

	.hdf-patterns {
		.panel-orange {
			border-radius: 0;
			@include box-shadow(0 0 0 0 $gray-light);
			border: 1px solid $hdf-gray-bd;
			
			.panel-heading, .panel-body {
				margin: 0;
			}

			.panel-heading {
				border-radius: 0;
			}
			
			.panel-body {
				position: relative;
				padding-bottom: 10px;
			
				.hdf-photopd {
					position: relative;
					text-align: center;
					margin-bottom: 5px;
					.hdf-blur {
						position: absolute;
						top: 0;
						display: block;
						width: 100%;
						height: 100%;
						max-height: 100%;
						background-color: white;
						@include opacity(0);
						@include transition(all .3s ease-out);
					}
				}
				.hdf-pricepd {
					text-align: center;
					font-family: 'Roboto', sans-serif;
					font-weight: 300;
					i {
						font-style: normal;
						font-size: $hdf-fs13;
						color: $gray-dark;
					}
					span {
						display: block;
						color: $hdf-red;
						font-size: $hdf-fs15;
					}
				}
				.hdf-btn-reg {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					max-height: 100%;
					text-align: center;
					display: table-cell;
					vertical-align: middle;
					.btn {
						font-family: 'Roboto', sans-serif;
						font-weight: 400;
						background-color: $hdf-red;
						color: white;
						font-size: $hdf-fs15;
						padding: 9px 13px;
						text-transform: uppercase;
						position: relative;
						top: 50%;
						margin-top: -40px;
						@include scale(0,0);
					   	@include transition-transform(0.2s 0.1s ease-in, opacity 0.1s ease-in-out);
					}
				}

				&:hover {
					cursor: pointer;
					.hdf-blur {
						@include opacity(.5);
					}
					.hdf-btn-reg {
						.btn {
							opacity:1;
							@include scale(1,1);
							@include transition-delay(0.1s);
						}
					}
				}
			}
		}
	}
}

.btn-red {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	background-color: $hdf-red;
	color: white;
	font-size: $hdf-fs15;
	padding: 6px 13px;
	text-transform: uppercase;
	border: none;
	&:hover, 
	&:focus,
	&:active,
  	&.active {
		color: white;
	}
}

.btn-pink {
	font-family: 'Arial', sans-serif;
	font-size: $hdf-fs11;
	background-color: $hdf-pink;
	color: $hdf-gray;
	padding: 9px 13px;
	border: 1px solid $hdf-pink-dark;
	text-transform: uppercase;
}

/*//News list*/
.hdf-newslst {
	border-radius: $border-radius-base;
	background-color: $hdf-white;
	@include box-shadow(0px 1px 5px 0px $gray-light);
	padding: 21px 20px;
	margin-bottom: 20px;

	.hdf-newsit {
		margin-bottom: 20px;
		padding-bottom: 20px;
		border-bottom: 1px dashed $panel-default-border;
		.hdf-ptnews {
			border: 1px solid $panel-default-border;
			padding: 4px;
		}
		.hdf-newsptn {
			.hdf-title {
				font-family: 'Roboto', sans-serif;
				font-size: $hdf-fs25;
				font-weight: 300;
				margin-bottom: 10px;
			}
			.hdf-words {
				font-family: 'Arial', sans-serif;
				font-size: $hdf-fs15;
				margin-bottom: 10px;
			}
		}
		.btn {
			font-size: $hdf-fs11;
		}
	}
	.hdf-vall {
		font-family: 'Roboto', sans-serif;
		font-size: $hdf-fs15;
		font-weight: 300;
		color: $hdf-red;
	}
}

/*//Form Reg*/
.hdf-formreg {
	border-radius: $border-radius-base;
	background-color: $hdf-white;
	@include box-shadow(0px 1px 5px 0px $gray-light);
	padding: 21px 20px 50px 20px;
	margin-bottom: 20px;
	.hdf-title {
		font-family: 'Roboto', sans-serif;
		font-size: $hdf-fs25;
		font-weight: 300;
		margin-bottom: 10px;
		text-align: center;
		letter-spacing: -1px;
	}
	p {
		color: $hdf-gray;
		font-family: 'Arial', sans-serif;
		font-size: $hdf-fs15;
		text-align: justify;
	}
	.hdf-hl {
		strong {
			font-size: $hdf-fs20;
			font-weight: bold;
			margin-bottom: 20px;
		}
	}
	.hdf-formtitle {
		font-family: 'Roboto', sans-serif;
		font-size: $hdf-fs15;
		font-weight: 700;
		text-transform: uppercase;
		margin: 20px 0;
	}

	.form-horizontal {
		.control-label {
			font-family: 'Arial', sans-serif;
			font-size: $hdf-fs15;
			font-weight: normal;
			color: $hdf-gray;
			padding-bottom: 5px;
		}
		.form-control {
			float: left;
			width: auto;
			font-size: $hdf-fs13;
		}
		.form-control-fw {
			width: 100%;
			margin-bottom: 15px;
		}
		.input-mw {
			min-width: 65%;
		}
		.select-mw {
			min-width: 20%;
		}
		.rq-field {
			color: $hdf-red;
		}
		.warning-text {
			float: left;
			font-size: $hdf-fs13;
			color: $hdf-red;
			display: block;
			padding-top: 7px;
		}
		textarea.form-control {
			width: 100%;
		}
	}
}

/*//Logo Partners*/

.hdf-partners {
	border-radius: $border-radius-base;
	background-color: $hdf-white;
	@include box-shadow(0px 1px 5px 0px $gray-light);
	padding: 0 20px 30px 20px;
	margin-bottom: 20px;
	
	.hdf-pnitem {
		position: relative;
		border-right: 1px solid $hdf-gray-bd;
		&:nth-child(3n+3) {
			border-right: 0;
			.bgtrans {
				bottom: 1px;
			}
		}
		&:nth-last-child(-n+3) {
			.hdf-logo {
				border-bottom: 0;
			}
			.bgtrans {
				right: 1px;
			}
		}
	}

	.hdf-logo {

		width: 100%;
		height: 216px;
		clear: both;
		a {
			display: block;
			width: 100%;
			height: 216px;
			
			img {
				overflow: auto;
				margin: auto;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
			}

		}

		.bgtrans {
			width: 40px;
			height: 40px;
			position: absolute;
			right: -20px;
			bottom: -20px;
			background-color: $hdf-white;
			z-index: 100;
		}

		margin-top: 0;
		border-bottom: 1px solid $hdf-gray-bd;		

	}

	.hdf-paging {
		margin-top:5px;
		text-align: center;
		.pagination {
			margin-bottom: 0;
			> li > a {
				color: $gray-dark;
				border: none;
				border-radius: 3px;
				margin-right: 5px;
				background-color: $hdf-gray-paging; 
				&:hover {
					color: $hdf-white-text;
					background-color: $hdf-gray-paging-hv;
				}
			}
			.active {
				a {
					color: $hdf-white-text;
					background-color: $hdf-gray-paging-hv;	
				}
			}
		}
	}
}

/*//Form Contact*/
.hdf-formcontact {
	.hdf-formtitle {
		color: $hdf-red;
	}
}
.hdf-addbrands {
	
	.hdf-brand {
		padding-bottom: 20px;
		margin-bottom: 20px;
		border-bottom: 1px dashed $hdf-gray-bd;	

		a {
			color: $hdf-red;
			cursor: pointer;
		}

		.clearfix {
			font-family: 'Arial', sans-serif;
			font-size: $hdf-fs15;
			color: $hdf-gray;
		}
	}

	.hdf-area {
		font-family: 'Roboto', sans-serif;
		font-size: $hdf-fs15;
		font-weight: 700;
		text-transform: uppercase;
		margin-bottom: 10px;
		span {
			margin-left: 20px;
		}
	}
}


/*//Team members*/
.hdf-tms {
	border-radius: $border-radius-base;
	background-color: $hdf-white;
	@include box-shadow(0px 1px 5px 0px $gray-light);
	padding: 20px 20px 30px 20px;
	margin-bottom: 20px;
	
	.hdf-pd {
		text-align: center;
		.hdf-picpd {
			position: relative;
			width: 171px;
			height: 171px;
			margin: 0 auto 10px auto;
			overflow: hidden;
			border-radius: 150px;
			-webkit-border-radius: 150px;
			-moz-border-radius: 150px;
			border: 3px solid $hdf-gray-cl;

			@include box-shadow(0px 1px 5px 0px $gray-light);
			
			img {
				position: absolute;
				top: 0;
				&.thumb1 {
					left: -15px;
				}

				&.thumb2 {
					left: -43px;
				}

				&.thumb3 {
					left: -22px;
				}
			}
		}
		.hdf-name {
			font-family: 'Roboto', sans-serif;
			font-weight: 300;
			margin-bottom: 20px;
			span {
				display: block;
				&.name {
					font-size: $hdf-fs20;
				}
				&.position {
					font-size: $hdf-fs15;
				}
			}
		}
		
	}

	.hdf-paging {
		margin-top:5px;
		text-align: center;
		.pagination {
			margin-bottom: 0;
			> li > a {
				color: $gray-dark;
				border: none;
				border-radius: 3px;
				margin-right: 5px;
				background-color: $hdf-gray-paging; 
				&:hover {
					color: $hdf-white-text;
					background-color: $hdf-gray-paging-hv;
				}
			}
			.active {
				a {
					color: $hdf-white-text;
					background-color: $hdf-gray-paging-hv;	
				}
			}
		}
	}
}

/*//Survey */
.hdf-surveys {

	border-radius: $border-radius-base;
	background-color: $hdf-white;
	@include box-shadow(0px 1px 5px 0px $gray-light);
	padding: 20px 20px 30px 20px;
	margin-bottom: 20px;

	.hdf-title {
		font-family: 'Roboto', sans-serif;
		font-size: $hdf-fs25;
		font-weight: 300;
		color: $gray-dark;
		margin-bottom: 20px;
	}

	.hdf-questions {
		.hdf-ques {
			font-family: 'Roboto', sans-serif;
			font-size: $hdf-fs15;
			font-weight: 700;
			color: $gray-dark;
		}
		.hdf-ans {
			font-family: 'Arial', sans-serif;
			font-size: $hdf-fs15;
			color: $gray-dark;
			padding-left: 45px;
			padding-bottom: 20px;
		}
	}
	.btn-red {
		margin-left: 45px;
	}

}